import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import '../../common/index.dart';
import '../../common/route/route_extensions.dart';
import '../../common/route/app_router.dart';

class NativePage extends StatefulWidget {
  const NativePage({super.key});

  @override
  State<NativePage> createState() => _NativePageState();
}

class _NativePageState extends State<NativePage> with TickerProviderStateMixin {
  late AnimationController _rightImageController;
  late AnimationController _centerImageController;
  late AnimationController _leftImageController;

  late Animation<Offset> _rightImageAnimation;
  late Animation<Offset> _centerImageAnimation;
  late Animation<Offset> _leftImageAnimation;

  @override
  void initState() {
    super.initState();

    // 初始化动画控制器
    _rightImageController = AnimationController(
      duration: const Duration(milliseconds: 1200),
      vsync: this,
    );

    _centerImageController = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );

    _leftImageController = AnimationController(
      duration: const Duration(milliseconds: 1400),
      vsync: this,
    );

    // 设置动画
    _rightImageAnimation =
        Tween<Offset>(
          begin: const Offset(2.0, -1.0), // 从右上角外部开始
          end: Offset.zero, // 结束在目标位置
        ).animate(
          CurvedAnimation(
            parent: _rightImageController,
            curve: Curves.elasticOut,
          ),
        );

    _centerImageAnimation =
        Tween<Offset>(
          begin: const Offset(0.0, -2.0), // 从上方开始
          end: Offset.zero, // 结束在目标位置
        ).animate(
          CurvedAnimation(
            parent: _centerImageController,
            curve: Curves.bounceOut,
          ),
        );

    _leftImageAnimation =
        Tween<Offset>(
          begin: const Offset(-2.0, 2.0), // 从左下角外部开始
          end: Offset.zero, // 结束在目标位置
        ).animate(
          CurvedAnimation(
            parent: _leftImageController,
            curve: Curves.elasticOut,
          ),
        );

    // 启动动画序列
    _startAnimationSequence();
  }

  void _startAnimationSequence() async {
    // 延迟启动，让页面先渲染
    await Future.delayed(const Duration(milliseconds: 300));

    // 同时启动所有动画，但有不同的延迟
    _centerImageController.forward();

    await Future.delayed(const Duration(milliseconds: 200));
    _rightImageController.forward();

    await Future.delayed(const Duration(milliseconds: 100));
    _leftImageController.forward();

    // 等待所有动画完成
    await Future.delayed(const Duration(milliseconds: 1500));

    // 停留0.75秒后跳转到main界面
    await Future.delayed(const Duration(milliseconds: 750));

    if (mounted) {
      context.navigateToWithParams(AppRoutes.main, {'fromNative': true});
    }
  }

  @override
  void dispose() {
    _rightImageController.dispose();
    _centerImageController.dispose();
    _leftImageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment(0.50, -0.00),
            end: Alignment(0.50, 1.00),
            colors: [const Color(0xFFFFBB67), Colors.white],
          ),
        ),

        child: SafeArea(
          top: false,
          bottom: false,
          child: Stack(
            children: [
              // 右上角图片
              Positioned(
                right: -75.w,
                top: -25.h,
                child: SlideTransition(
                  position: _rightImageAnimation,
                  child: Container(
                    width: 194.w,
                    height: 194.h,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(MyImages.nativeRight),
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                ),
              ),
              // 中心图片
              Center(
                child: SlideTransition(
                  position: _centerImageAnimation,
                  child: Container(
                    width: 96.w,
                    height: 94.h,
                    decoration: ShapeDecoration(
                      image: DecorationImage(
                        image: AssetImage(MyImages.nativeBgCenter),
                        fit: BoxFit.contain,
                      ),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(22.r),
                      ),
                    ),
                  ),
                ),
              ),
              // 左下角图片
              Positioned(
                left: -75.w,
                bottom: -50.h,
                child: SlideTransition(
                  position: _leftImageAnimation,
                  child: Container(
                    width: 243.w,
                    height: 243.h,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(MyImages.nativeBgLeft),
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
